<template>
  <d2-container>
    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="feedbckId" label="ID" width="60"></el-table-column>
        <el-table-column prop="userName" label="反馈用户名" width="120"></el-table-column>
        <el-table-column prop="content" label="反馈内容" width="300"></el-table-column>
        <el-table-column prop="isVip" :formatter="formatIsVip" label="VIP" width="60"></el-table-column>
        <el-table-column prop="phoneNo" label="用户手机号码" width="120"></el-table-column>
        <el-table-column prop="contact" label="联系方式" width="120"></el-table-column>
        <el-table-column prop="image1" label="图片1" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.image1"  width="70"/>
          </template>
        </el-table-column>
        <el-table-column prop="image2" label="图片2" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.image2"  width="70"/>
          </template>
        </el-table-column>
        <el-table-column prop="image3" label="图片1" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.image3"  width="70"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="反馈时间" width="200"></el-table-column>
        <el-table-column prop="newSource" label="反馈来源" width="200"></el-table-column>
        <el-table-column prop="adminName" label="处理人" width="200"></el-table-column>
        <el-table-column prop="updateTime" label="处理时间" width="200"></el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
              <el-button
              size="mini"
              type="primary"
              @click="handleVipBill(scope.$index, scope.row)">处理用户反馈</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template slot="footer">
      <el-pagination
        :current-page="pageNum"
        :page-size="size"
        :total="totalCount"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import { getUserFeedbackPage } from '@api/user.management'
export default {
  name: 'user-feedback-page',
  data () {
    return {
      totalCount: 0,
      pageSize: 10,
      pageNum: 1,
      keyword: '',
      tableData: [],
      page: {
        pageCurrent: 1,
        pageSize: 10,
        pageTotal: 0
      }
    }
  },
  created: function () {
  },
  mounted: function () {
    this.getUserPageRequest()
  },
  methods: {
    formatIsVip: function (row, column, cellValue) {
      if (cellValue === 1) {
        return '是'
      } else {
        return '否'
      }
    },
    getUserPageRequest: function () {
      getUserFeedbackPage({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        userId: this.$route.params.userId
      })
        .then(res => {
          console.log(res)
          this.totalCount = res.totalCount
          this.pageSize = res.pageSize
          this.tableData = res.userFeedbacks
        })
        .catch(err => {
          console.log(err)
        })
    },
    handlePaginationChange (val) {
      this.$notify({
        title: '分页变化',
        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
      })
      this.pageSize = val.size
      this.totalCount = val.total
      this.pageNum = val.current
      // nextTick 只是为了优化示例中 notify 的显示
      this.$nextTick(() => {
        this.getUserPageRequest()
      })
    }
  }
}
</script>
